import React from "react";
import { Component } from "react";
import { getAttendanceApi, getTotalStatisticApi } from "../../js/bigscreen/api";
import "../../css/bigscreen/dailyworkstatistic.css"



class DailyWorkStatistic extends Component {
    constructor(props) {
        super(props);
        this.state = {
            attendance: { inspectAttendance: 0, patroAttendance: 0 },
            totalStatistic: { inspectnum: 0, inspectrate: 0, patrolnum: 0, patrolrate: 0, dangernum: 0, dangerdealnum: 0, dealrate: 0 }
        }
    }

    componentDidMount() {
        this.getAttendance(parseInt(sessionStorage.getItem("departmentId")));
        this.getTotalStatistic(parseInt(sessionStorage.getItem("departmentId")));
    }

    getAttendance = (parent) => {
        getAttendanceApi(parent).then((res) => {
            let temp = {
                inspectAttendance: res.data.attendance.inspectattendance,
                patroAttendance: res.data.attendance.patrolattendance
            };
            this.setState({
                attendance: temp
            })
        }).catch((e) => {
            console.log(e);
        })
    }

    getTotalStatistic = (educationId) => {
        getTotalStatisticApi(educationId).then((res) => {
            let temp = {
                inspectnum: res.data.inspectnum,
                inspectrate: res.data.inspectrate,
                patrolnum: res.data.patrolnum,
                patrolrate: res.data.patrolrate,
                dangernum: res.data.dangernum,
                dangerdealnum: res.data.dangerdealnum,
                dealrate: res.data.dealrate
            }
            this.setState({
                totalStatistic: temp
            })

        }).catch((e) => {
            console.log(e);
        })
    }


    render() {
        return (
            <div className="dailywordbg">
                <div className="dailyheader">
                    <svg class="icon" aria-hidden="true">
                        <use xlinkHref="#icon-bijiben"></use>
                    </svg>
                    <span className="dailyheadertxt">网格安全日常工作统计</span>
                </div>
                <ul style={{ color: 'white' }}>
                    <li className="dailyitem">
                        <div className="dws" style={{ marginLeft: '0' }}>
                            <svg class="icon" aria-hidden="true">
                                <use xlinkHref="#icon-fangzi"></use>
                            </svg>
                            <span style={{ fontSize: '.1875rem', marginTop: '.0625rem' }}>安全巡更统计</span>
                        </div>
                        <div className="dws">
                            <span>累计巡更数</span>
                            <span className="number">{this.state.totalStatistic.patrolnum}</span>
                        </div>
                        <div className="dws">
                            <span>参与人数</span>
                            <span className="number">{this.state.attendance.patroAttendance}</span>
                        </div>
                        <div className="dws">
                            <span>完成率</span>
                            <span className="rate">{(this.state.totalStatistic.patrolrate * 100).toFixed(0)}%</span>
                        </div>
                    </li>
                    <li className="dailyitem">
                        <div className="dws" style={{ marginLeft: '0' }}>
                            <svg class="icon" aria-hidden="true">
                                <use xlinkHref="#icon-aixin"></use>
                            </svg>
                            <span style={{ fontSize: '.1875rem', marginTop: '.0625rem' }}>安全巡检统计</span>
                        </div>
                        <div className="dws">
                            <span>累计巡检数</span>
                            <span className="number">{this.state.totalStatistic.inspectnum}</span>
                        </div>
                        <div className="dws">
                            <span>参与人数</span>
                            <span className="number">{this.state.attendance.inspectAttendance}</span>
                        </div>
                        <div className="dws">
                            <span>完成率</span>
                            <span className="rate">{(this.state.totalStatistic.inspectrate * 100).toFixed(0)}%</span>
                        </div>
                    </li>
                    <li className="dailyitem">
                        <div className="dws" style={{ marginLeft: '0' }}>
                        <svg class="icon" aria-hidden="true">
                                <use xlinkHref="#icon-xiaomaibu"></use>
                            </svg>
                            <span style={{ fontSize: '.1875rem', marginTop: '.0625rem' }}>安全隐患统计</span>
                        </div>
                        <div className="dws">
                            <span>发现隐患数</span>
                            <span className="number">{this.state.totalStatistic.dangernum}</span>
                        </div>
                        <div className="dws">
                            <span>处理隐患数</span>
                            <span className="number">{this.state.totalStatistic.dangerdealnum}</span>
                        </div>
                        <div className="dws">
                            <span>处理率</span>
                            <span className="rate">{(this.state.totalStatistic.dealrate * 100).toFixed(0)}%</span>
                        </div>
                    </li>
                </ul>
            </div>
        );
    }
}

export { DailyWorkStatistic }